<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>爱尚拓展</title>
  <link rel="stylesheet" href="./js/photoSwiper/css/photoswipe.css">
  <link rel="stylesheet" href="./js/photoSwiper/css/default-skin.css">
  <link rel="stylesheet" href="./css/stylesheet.css">
  <style> 
    .btn-down {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      background: url('./image/download.png') center no-repeat;
      z-index: 111;
      background-size: cover;
    }
  </style>
</head>

<body>

  <div class="p-swiper">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3908503302,1974610925&fm=26&gp=0.jpg" alt="">
  </div>

  <div class="p-create">
    <div class="p-create__header">
      <div class="p-create__pics">
        <img src=https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3908503302,1974610925&fm=26&gp=0.jpg" alt="">
      </div>
      <div class="p-create__info">
        <h2>官方摄影师</h2>
        <p>新年快乐我们要看好看的妹子amazing</p>
      </div>
    </div>
  </div>

  <div class="p-titles">
    <h2>新春快乐大奖赛新春快乐大奖赛新春快乐大奖赛新春快乐大奖赛新春快乐大奖赛新春快乐大奖赛新春快乐大奖赛</h2>
    <div class="p-titles__see">
      <strong>111</strong>浏览
    </div>
    <span class="p-titles__time">
      <svg data-v-2f041917="" data-v-052b1703="" width="16" height="16" viewBox="0 0 32 32" version="1.1"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="vertical-align: middle;">
        <title data-v-2f041917="">TIME</title>
        <desc data-v-2f041917=""></desc>
        <defs data-v-2f041917="">
          <linearGradient data-v-2f041917="" x1="87%" y1="83%" x2="0%" y2="15%" id="TIME">
            <stop data-v-2f041917="" stop-color="#FF4E28" offset="0%"></stop>
            <stop data-v-2f041917="" stop-color="#FF4E28" offset="100%"></stop>
          </linearGradient>
        </defs>
        <g data-v-3f038b2a="" data-v-2f041917="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g data-v-3f038b2a="" transform="translate(-24.000000, -899.000000)">
            <g data-v-3f038b2a="" transform="translate(24.000000, 899.000000)">
              <g data-v-3f038b2a="">
                <rect data-v-3f038b2a="" fill-opacity="0" fill="#FFFFFF" x="0" y="0" width="32" height="32"></rect>
                <path data-v-3f038b2a=""
                  d="M17.5,14.5 L17.5,7.14285714 C17.5,6.31443002 16.8284271,5.64285714 16,5.64285714 C15.1715729,5.64285714 14.5,6.31443002 14.5,7.14285714 L14.5,15.8428571 C14.5,15.8692119 14.5006797,15.8954079 14.5020225,15.9214286 C14.5006797,15.9474493 14.5,15.9736453 14.5,16 C14.5,16.8284271 15.1715729,17.5 16,17.5 L23.3571429,17.5 C24.18557,17.5 24.8571429,16.8284271 24.8571429,16 C24.8571429,15.1715729 24.18557,14.5 23.3571429,14.5 L17.5,14.5 Z M16,30.5 C7.99187113,30.5 1.5,24.0081289 1.5,16 C1.5,7.99187113 7.99187113,1.5 16,1.5 C24.0081289,1.5 30.5,7.99187113 30.5,16 C30.5,24.0081289 24.0081289,30.5 16,30.5 Z"
                  fill="url(#TIME)"></path>
              </g>
            </g>
          </g>
          <!---->
        </g>
      </svg>
      2019-2-26 21:00 - 2019-2-26 21:00
    </span>
    <span class="p-titles__location">
      <svg data-v-2f041917="" data-v-052b1703="" width="16" height="18" viewBox="0 0 32 36" version="1.1"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="vertical-align: middle;">
        <title data-v-2f041917="">ADDRESS</title>
        <desc data-v-2f041917=""></desc>
        <defs data-v-2f041917="">
          <linearGradient data-v-2f041917="" x1="87%" y1="83%" x2="0%" y2="15%" id="ADDRESS">
            <stop data-v-2f041917="" stop-color="#FF4E28" offset="0%"></stop>
            <stop data-v-2f041917="" stop-color="#FF4E28" offset="100%"></stop>
          </linearGradient>
        </defs>
        <g data-v-0fb07d0f="" data-v-2f041917="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g data-v-0fb07d0f="" transform="translate(-24.000000, -949.000000)" fill="url(#ADDRESS)">
            <g data-v-0fb07d0f="" transform="translate(24.000000, 949.000000)">
              <path data-v-0fb07d0f=""
                d="M16,31.5 C10.9127475,31.5 2,21.6489716 2,13.5 C2,5.35102839 8.2680135,0.5 16,0.5 C23.7319865,0.5 30,5.3838031 30,13.5 C30,21.6161969 21.0872525,31.5 16,31.5 Z M16,18.5 C19.0375661,18.5 21.5,16.0375661 21.5,13 C21.5,9.96243388 19.0375661,7.5 16,7.5 C12.9624339,7.5 10.5,9.96243388 10.5,13 C10.5,16.0375661 12.9624339,18.5 16,18.5 Z">
              </path>
            </g>
          </g>
          <!---->
        </g>
      </svg>
      上海市·浦东新区·上海浦东新区新场镇
    </span>
    <p>
      在古代民间，人们从年末的廿三或廿四的祭灶便开始“忙年”了，新年到正月十九日才结束。
    </p>
  </div>

  <div class="p-group">
    <div class="p-group__header">
      <ul>
        <li><a href="">作品</a></li>
        <!-- <li><a href="">热图</a></li>
        <li><a href="">时间轴</a></li> -->
      </ul>
    </div>
    <div class="p-group__bodyer p-photo__list" id="gallery">
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
      <a class="p-photo__item" href="./image/banner.png" data-size="1600x1068" data-med="./image/banner.png" data-med-size="1024x683" data-author="作者作者/修图修图">
        <img src="./image/banner.png" alt="" />
        <figure>第一张图片</figure>
      </a>
    </div>
  </div>

  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="btn-down"></div>
    <div class="pswp__scroll-wrap">
      <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
      </div>
      <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">
          <div class="pswp__counter"></div>
          <!--关闭按钮-->
          <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
          <!--分享按钮-->
          <!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
          <!--全屏按钮-->
          <!-- <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> -->
          <!--退出按钮-->
          <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
          <div class="pswp__preloader">
            <div class="pswp__preloader__icn">
              <div class="pswp__preloader__cut">
                <div class="pswp__preloader__donut"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
          <div class="pswp__share-tooltip"></div> 
        </div>

        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        </button>

        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        </button>

        <div class="pswp__caption">
          <div class="pswp__caption__center"></div>
        </div>
      </div>
    </div>
  </div>
 
  <script src="./js/jquery.min.js"></script>
  <script src="./js/photoSwiper/js/photoswipe.js"></script>
  <script src="./js/photoSwiper/js/photoswipe-ui-default.min.js"></script>
  <script>
    $(function () {

      $('.btn-down').on('click', function () {
        const imgs = $('.pswp__container').find('.pswp__zoom-wrap img').eq(0).attr('src')
        console.log(imgs)
        window.open(imgs)
      })

      var initPhotoSwipeFromDOM = function(gallerySelector) {

      var parseThumbnailElements = function(el) {
          var thumbElements = el.childNodes,
              numNodes = thumbElements.length,
              items = [],
              el,
              childElements,
              thumbnailEl,
              size,
              item;

          for(var i = 0; i < numNodes; i++) {
              el = thumbElements[i];

              // include only element nodes 
              if(el.nodeType !== 1) {
                continue;
              }

              childElements = el.children;

              size = el.getAttribute('data-size').split('x');

              // create slide object
              item = {
                src: el.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10),
                author: el.getAttribute('data-author')
              };

              item.el = el; // save link to element for getThumbBoundsFn

              if(childElements.length > 0) {
                item.msrc = childElements[0].getAttribute('src'); // thumbnail url
                if(childElements.length > 1) {
                    item.title = childElements[1].innerHTML; // caption (contents of figure)
                }
              }


          var mediumSrc = el.getAttribute('data-med');
                if(mediumSrc) {
                  size = el.getAttribute('data-med-size').split('x');
                  // "medium-sized" image
                  item.m = {
                      src: mediumSrc,
                      w: parseInt(size[0], 10),
                      h: parseInt(size[1], 10)
                  };
                }
                // original image
                item.o = {
                  src: item.src,
                  w: item.w,
                  h: item.h
                };

              items.push(item);
          }

          return items;
      };

      // find nearest parent element
      var closest = function closest(el, fn) {
          return el && ( fn(el) ? el : closest(el.parentNode, fn) );
      };

      var onThumbnailsClick = function(e) {
          e = e || window.event;
          e.preventDefault ? e.preventDefault() : e.returnValue = false;

          var eTarget = e.target || e.srcElement;

          var clickedListItem = closest(eTarget, function(el) {
              return el.tagName === 'A';
          });

          if(!clickedListItem) {
              return;
          }

          var clickedGallery = clickedListItem.parentNode;

          var childNodes = clickedListItem.parentNode.childNodes,
              numChildNodes = childNodes.length,
              nodeIndex = 0,
              index;

          for (var i = 0; i < numChildNodes; i++) {
              if(childNodes[i].nodeType !== 1) { 
                  continue; 
              }

              if(childNodes[i] === clickedListItem) {
                  index = nodeIndex;
                  break;
              }
              nodeIndex++;
          }

          if(index >= 0) {
              openPhotoSwipe( index, clickedGallery );
          }
          return false;
      };

      var photoswipeParseHash = function() {
        var hash = window.location.hash.substring(1),
          params = {};

          if(hash.length < 5) { // pid=1
              return params;
          }

          var vars = hash.split('&');
          for (var i = 0; i < vars.length; i++) {
              if(!vars[i]) {
                  continue;
              }
              var pair = vars[i].split('=');  
              if(pair.length < 2) {
                  continue;
              }           
              params[pair[0]] = pair[1];
          }

          if(params.gid) {
            params.gid = parseInt(params.gid, 10);
          }

          return params;
      };

      var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
          var pswpElement = document.querySelectorAll('.pswp')[0],
              gallery,
              options,
              items;

        items = parseThumbnailElements(galleryElement);

          // 这里定义你需要的参数，官网API地址 http://photoswipe.com/documentation/getting-started.html
          options = {
              galleryUID: galleryElement.getAttribute('data-pswp-uid'),
              //点击图片关闭
                    tapToClose: true,
              getThumbBoundsFn: function(index) {
                  // See Options->getThumbBoundsFn section of docs for more info
                  var thumbnail = items[index].el.children[0],
                      pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                      rect = thumbnail.getBoundingClientRect(); 

                  return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
              }
                    //这里是作者信息 
            ,addCaptionHTMLFn: function(item, captionEl, isFake) {
            if(!item.title) {
              captionEl.children[0].innerText = '';
              return false;
            }
            captionEl.children[0].innerHTML = item.title + '<br/><small>摄影: ' + item.author.split('/')[0] + '</small>' + '<br/><small>修图: ' + item.author.split('/')[1] + '</small>';
            return true;
              }
          };


          if(fromURL) {
            if(options.galleryPIDs) {
              // parse real index when custom PIDs are used 
              // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
              for(var j = 0; j < items.length; j++) {
                if(items[j].pid == index) {
                  options.index = j;
                  break;
                }
              }
            } else {
              options.index = parseInt(index, 10) - 1;
            }
          } else {
            options.index = parseInt(index, 10);
          }

          // exit if index not found
          if( isNaN(options.index) ) {
            return;
          }



        var radios = document.getElementsByName('gallery-style');
        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                if(radios[i].id == 'radio-all-controls') {

                } else if(radios[i].id == 'radio-minimal-black') {
                  options.mainClass = 'pswp--minimal--dark';
                  options.barsSize = {top:0,bottom:0};
              options.captionEl = false;
              options.fullscreenEl = false;
              options.shareEl = false;
              options.bgOpacity = 0.85;
              options.tapToClose = true;
              options.tapToToggleControls = false;
                }
                break;
            }
        }

          if(disableAnimation) {
              options.showAnimationDuration = 0;
          }

          // Pass data to PhotoSwipe and initialize it
          gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

          // see: http://photoswipe.com/documentation/responsive-images.html
        var realViewportWidth,
            useLargeImages = false,
            firstResize = true,
            imageSrcWillChange;

        gallery.listen('beforeResize', function() {

          var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
          dpiRatio = Math.min(dpiRatio, 2.5);
            realViewportWidth = gallery.viewportSize.x * dpiRatio;


            if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
              if(!useLargeImages) {
                useLargeImages = true;
                  imageSrcWillChange = true;
              }
                
            } else {
              if(useLargeImages) {
                useLargeImages = false;
                  imageSrcWillChange = true;
              }
            }

            if(imageSrcWillChange && !firstResize) {
                gallery.invalidateCurrItems();
            }

            if(firstResize) {
                firstResize = false;
            }

            imageSrcWillChange = false;

        });

        gallery.listen('gettingData', function(index, item) {
            if( useLargeImages ) {
                item.src = item.o.src;
                item.w = item.o.w;
                item.h = item.o.h;
            } else {
                item.src = item.m.src;
                item.w = item.m.w;
                item.h = item.m.h;
            }
        });

        gallery.init();
      };
      
      // select all gallery elements
      var galleryElements = document.querySelectorAll( gallerySelector );
      for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].onclick = onThumbnailsClick;
      }

      // Parse URL and open gallery if it contains #&pid=3&gid=1
      var hashData = photoswipeParseHash();
      if(hashData.pid && hashData.gid) {
        openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );
      }
      };
      initPhotoSwipeFromDOM('#gallery');


    })
  </script>
</body>
</html>